<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DoitCSS V2.3 管理后台首页 实例</title>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keywords" content="DoitCSS V1.0">
	<meta name="description" content="DoitCSS是根据bootstap改编的CSS框架">
	<!--基础-->
	<link href="../css/base.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--文字排版-->
	<link href="../css/typography.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--表格-->
	<link href="../css/tables.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--表单按钮-->
	<link href="../css/form-buttons.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--架构-->
	<link href="../css/layouts.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--元件-->
	<link href="../css/elements.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--图标-->
	<link href="../css/font-awesome.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--菜单-->
	<link href="../css/navigation.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--分页-->
	<link href="../css/pagination.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--管理后台-->
	<link href="../css/admin.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--清除浮动-->
	<link href="../css/clear.css?ver=v2.3" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
</head>

<body>
<div class="container-fluid">
	<!--顶部菜单-->
	<div class="admin-header">
		<div class="logo">
			<a href="#" title="home">聚宝盆管理平台</a>
		</div>
		<div class="main-menu">
			<ul class="navbar-nav">
				<li><a href="#">菜单一 <span class="badge badge-danger">4</span></a></li>
				<li><a href="#">菜单二 <span class="badge badge-success">4</span></a></li>
				<li class="dropdown-hover dropdown-success mr10"><a href="#">用户中心 <i class="fa fa-caret-down"></i></a>
				<ul class="dropdown-menu dropdown-info">
					<li><a href="#">用户信息</a></li>
					<li><a href="#">退出登陆</a></li>
				</ul>
				</li>
			</ul>
		</div>
	</div>
	<!--/顶部菜单-->

	<div class="main-container clearfix">
		<!--左侧菜单-->
		<div class="sidebar" id="sidebar">
			<ul class="nav-list">
				<li><a href="#">栏目一</a></li>
				<li class="active"><a href="#">栏目二</a></li>
				<li><a href="javascript:void(0);" class="dropdown-toggle">栏目三 <b class="arrow fa fa-angle-down"></b></a>
					<ul class="sub-nav-list sub-nav-hide">
						<li><a href="#">风里</a></li>
						<li class="active"><a href="#">雨里</a></li>
						<li><a href="#">夜里</a></li>
					</ul>
				</li>
				<li><a href="#">栏目四</a>
					<ul class="sub-nav-list">
						<li><a href="#">风里</a></li>
						<li><a href="#">雨里</a></li>
						<li><a href="#">夜里</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<!--/左侧菜单-->

		<!--内容部分-->
		<div class="main-content" id="main-content">
			<div class="main-content-inner">
				<!--面包屑导航-->
				<div class="breadcrumbs">
					<ul class="breadcrumb">
						<li><i class="fa fa-home"></i> <a href="#">主页</a></li>
						<li><a href="#">栏目一</a></li>
						<li class="active">页面标题</li>
					</ul>
				</div>
				<!--/面包屑导航-->

				<!--页面内容部分-->
				<div class="page-content">
					<div class="page-header">文章标题</div>
				</div>
				<!--页面内容部分-->
			</div>
		</div>
		<!--/内容部分-->
	</div>
</div>
<script type="text/javascript">
function initialWinSize(){
	//分析sidebar高度
	var winHeight=$(window).height();
	var sidebarHeight=$('#sidebar').height();
	var contentHeight=$('#main-content').height();
	var standardHeight=(sidebarHeight>=contentHeight)?sidebarHeight:contentHeight;
	var targetHeight=winHeight-60;
	if(standardHeight>targetHeight){
		targetHeight=standardHeight;
	}
	$('#sidebar').css('height', targetHeight).show();
	$('#main-content').css('height', targetHeight);
	//分析内容部分宽度
	var winWidth=$(window).width();
	var contentWidth=winWidth-181;
	$('#main-content').css('width', contentWidth).show();
}
$(function(){
	initialWinSize();
	//当页面大小发生变化时,主体内容部分宽度联动变化
	$(window).resize(function() {
		initialWinSize();
	});
	//sidebar子菜单的伸缩效果
	$("a.dropdown-toggle").on("click", function(){
		if(!$(this.parentNode.parentNode).hasClass("nav-list")){
			return false;
		}
		var parent=$(this.parentNode);
		if(parent.hasClass("open")){
			//关闭子菜单
			$(this).next().removeClass("sub-nav-show").addClass("sub-nav-hide");
			parent.removeClass("open");
		} else {
			//打开子菜单
			$(this).next().removeClass("sub-nav-hide").addClass("sub-nav-show");
			parent.addClass("open");
		}
	});
});
</script>
</body>
</html>